<template>
  <a-page-header
      class="demo-page-header"
      style="border: 1px solid rgb(235, 237, 240);
      background-color: #25a4bb;"
      :title="data.title"
      @back="() => $router.go(-1)"
  >
    <template #extra>
      <a-button key="3"
                v-show="showEdit"
                style="background-color: #364d79;
                border-radius: 10px;
                color: #f1f1f1"
                @click="$router.push({path:'/write/',query:{articleId:id}})"
      >
        编辑
      </a-button>
    </template>
  </a-page-header>
  <!--  <div class="header">-->
  <!--    <router-link to="/">-->
  <!--      <div class="header-left">-->
  <!--        <div class="iconfont back-icon">&#xe665;</div>-->
  <!--      </div>-->
  <!--    </router-link>-->
  <!--    <div class="title">-->
  <!--      {{ data.title }}-->
  <!--    </div>-->
  <!--    <a-button key="1" type="primary">Primary</a-button>-->
  <!--  </div>-->
  <!--  <Swiper :list="data.swiperList"></Swiper>-->
  <Header :list="data.swiperList"></Header>
  <Content :list="data.content"></Content>
  <Comment :list="data.commentList" :id="id" @change=""></Comment>

</template>

<script>
import axios from 'axios'
import {useStore} from 'vuex'
import {reactive, onMounted, ref, computed} from "vue";
import Header from './components/Header'
import Swiper from './components/swiper'
import Content from "./components/Content";
import Comment from "./components/Comment"
import store from "@/store";
import Router, {useRouter} from "vue-router";

export default {
  name: 'Article',
  props: {
    id: Number
  },
  components: {
    Header,
    Content,
    Swiper,
    Comment
  },
  setup(props, context) {
    const user = computed(() => store.state.user)
    const data = reactive({
      title: '',
      swiperList: [],
      content: [],
      commentList: []
    })

    const store = useStore();
    const city = store.state.city;

    const showEdit = ref(false);
    //用于传输给编辑的文章ID
    const id = ref();

    // const router = useRouter();
    // console.log('router:', router.currentRoute.value.params.articleId)
    // const articleId=ref(router.currentRoute.value.params.articleId)

    // async function getHomeInfo() {
    //   let res = await axios.get('/api/index.json?city=' + city)
    //   res = res.data
    //   if (res.ret && res.data) {
    //     const result = res.data
    //     // data.swiperList = result.swiperList
    //     // data.iconList = result.iconList
    //     // data.recommendList = result.recommendList
    //     // data.weekendList = result.weekendList
    //   }
    // }

    //轮播图数据获取
    async function getSwiper() {
      // console.log("articleId",props)
      let router = useRouter();
      console.log("route", router.currentRoute.value.params)
      const articleId = router.currentRoute.value.params.articleId;
      // console.log('111')
      let res = await axios.get('http://192.168.10.73:8880/article/select?articleId=' + articleId)
      // console.log(res)
      const result = res.data
      if (result.status === 10000) {
        id.value = articleId;
        data.title = result.content.title;
        data.swiperList = result.content.img;
        data.content = result.content;
        // console.log("内容",data.content)
        // console.log("user.value.id",user.value.id==data.content.userId)
        if (user.value.id == data.content.userId) {
          showEdit.value = true;
        }
      }
    }

    async function getComment() {
      let router = useRouter();
      console.log("route", router.currentRoute.value.params)
      const articleId = router.currentRoute.value.params.articleId;
      let res = await axios.get('comment/getComment?articleId=' + articleId)
      const result = res.data;
      console.log("result", result)
      if (result.status === 10000) {
        data.commentList = result.content;
        console.log("评论", data.commentList)
      }
    }

    onMounted(() => {
      data.lastCity = city

      // getHomeInfo();
      getSwiper();
      getComment();
    })

    return {data, getComment, showEdit, id}
  }
}
</script>


<style lang="stylus">
@import "~styles/vaibles.styl"
@import "~styles/mixins.styl"
.header
  display: flex
  line-height: $headerHeight
  background $bgColor
  color #ffffff

  .header-left
    width: 1rem
    margin-left .1rem
    float: left

    .back-icon
      text-align center
      font-size .7rem

  .title
    padding-left 6%
    width 70%
    height 1rem
    text-align center
    font-size .5rem
    text-overflow ellipsis
    overflow hidden
    white-space nowrap

.wangeditor
  padding 20px

.wangeditor img
  max-width 100%
  height auto

.ant-carousel .img
  width: 100%
  height: auto
  object-fit: cover
</style>
